<!--
 @description 仓储看板
 @fileName index.vue
 @author maliang
 @created 2022/03/23 10:46:00
-->
<template>
  <div>
    <div class="top-container">
      <div class="banner">
        <img src="@/assets/image/banner-logistics.png">
      </div>
      <div class="main-core-page">
        <span class="icon-tip left" />
        <span class="icon-tip right" />
        <div class="wrapper">
          <div class="main-title">
            <div style="flex:1">发货仓出入库</div>
            <div class="core-time" @click="showCalendar = true">
              <span>{{ coreDateShow }}</span>
              <svg-icon icon-class="xia" />
            </div>
          </div>
          <core-data :core-date="coreDate" />
        </div>
      </div>
    </div>
    <div class="main-page">
      <module-item class="module-item" module-title="线边仓当前库存">
        <div slot="other">
          <div class="type-list">
            <div
              v-for="(item, index) in tableList"
              :key="index"
              :class="{ active: currentTable === item }"
              @click="swichStorage(item)"
            >
              <i />
              <span>{{ item }}</span>
            </div>
          </div>
        </div>
        <histogram
          slot="content"
          :show-legend="false"
          :x-axis-data="yieldColumnarXAxisData"
          :series-data="yieldColumnarSeriesData"
          :series-bar-config="seriesBarConfig"
        />
      </module-item>
    </div>
    <van-calendar
      v-model="showCalendar"
      class="custom-calendar"
      color="#12B9A3"
      :row-height="40"
      :min-date="calendarMinDate"
      :max-date="calendarMaxDate"
      @confirm="onConfirmCalendar"
    />
  </div>
</template>
<script>
import CoreData from './components/CoreData'
import CoreDateMixin from '@/mixins/CoreDate'
import ModuleItem from '@/views/delivery/components/ModuleItem'
import Histogram from '@/views/delivery/components/Histogram'
import { getLineSideStorage } from '@/apis/storage'
export default {
  name: 'Storage',
  components: { CoreData, ModuleItem, Histogram },
  mixins: [CoreDateMixin],
  data() {
    return {
      showCalendar: false,
      yieldColumnarXAxisData: null,
      yieldColumnarSeriesData: [
        { name: '库存数量', field: 'warehouseNum' }
      ],
      seriesBarConfig: {
        barWidth: '20px',
        stack: 'overlap' // 堆叠效果(字符需要统一)
      }, // 自定义柱状图配置
      tableList: ['板式', '沙发', '实木', '床垫'],
      currentTable: '板式'
    }
  },
  mounted() {
    this.getLineSideStorage(this.currentTable)
  },
  methods: {
    swichStorage(name) {
      this.currentTable = name
      this.getLineSideStorage(name)
    },
    getLineSideStorage(warehouseName) {
      this.yieldColumnarXAxisData = null
      getLineSideStorage({
        warehouseName: warehouseName + '线边仓'
      }).then((res) => {
        if (res.data && res.data.length) {
          const { xAxisData, seriesData } = this.resetLineChartData(
            res.data,
            this.yieldColumnarSeriesData,
            'descrC'
          )
          this.yieldColumnarXAxisData = xAxisData
          this.yieldColumnarSeriesData = seriesData
        }
      })
    },
    // 折线图数据处理(list: 未处理前的图表数据；seriesData：图列名称与对应字段；xAxisField：x轴对应字段  )
    resetLineChartData(list, seriesData, xAxisField, unit = '') {
      seriesData.forEach((item) => {
        item.data = []
      })
      let copyLsit = JSON.parse(JSON.stringify(list))
      const copySeriesData = JSON.parse(JSON.stringify(seriesData))
      const xAxisData = []
      if (xAxisField === 'date') {
        // 根据日期排序
        copyLsit = copyLsit.sort((a, b) => {
          return (
            Number(a.date.replace(/-/g, '')) -
                        Number(b.date.replace(/-/g, ''))
          )
        })
      }
      copyLsit.forEach((item) => {
        xAxisData.push(item[xAxisField] + unit)
        copySeriesData.forEach((row) => {
          row.data.push(item[row.field])
        })
      })
      return {
        xAxisData,
        seriesData: copySeriesData
      }
    }
  }
}
</script>
<style lang="less" scoped>
.type-list {
    display: flex;
    > div {
        margin-right: 20px;
        display: flex;
        align-items: center;
        > i {
            width: 14px;
            height: 14px;
            background-color: #eee;
            margin-right: 6px;
        }
        > span {
            font-size: 13px;
            color: #666;
            position: relative;
        }
    }
    > .active {
        > i {
            width: 14px;
            height: 14px;
            background-color: #12b9a3;
            margin-right: 6px;
        }
    }
}
</style>
